<template>
  <div class="view-home">
    <LightText
      :show-num="3"
      yellow-text="my work"
      class="lightText"
    ></LightText>

    <div class="sec">
      <!-- 内容 -->
      <div class="main" id="homeMain" v-if="userId != ''">
        <layout-col>
          <template #left>
            <div
              class="job-list"
              v-for="item in articles"
              :key="item.id"
              @click="handleSelectArticle(item.id)"
            >
              <div class="top-box">
                <div class="top">
                  <div class="top-title">{{ item.jobName }}</div>
                  <div class="top-money">{{ getStatusText(item.status) }}</div>
                </div>

                <div class="middle-tag">
                  <div class="tag">{{ item.address }}</div>
                </div>

                <div class="desprition">{{ item.desprition }}</div>
              </div>

              <div class="bottom">
                <div class="bottom-left">
                  <img :src="item.img" alt="" class="circle-img" />
                  <div class="conpanyName">{{ item.conpanyName }}</div>
                </div>

                <div class="bottom-right"></div>
              </div>
            </div>
          </template>
          <template #right>
            <div class="right-col">
              <div class="collect">
                <p class="collect-title">已收藏职位</p>

                <div
                  v-for="(item, index) in collectArticle"
                  :key="index"
                  class="collectItem"
                >
                  <span @click="handleSelectArticle(item.article_id)">
                    <img
                      src="@/assets/icon/article.png"
                      alt=""
                      style="width: 20px; font-size: 14px"
                    />
                    {{ item.article_name }}</span
                  >

                  <span style="float: right" @click="deleteCollect(item)"
                    >delete</span
                  >
                </div>
              </div>
            </div>
          </template>
        </layout-col>
      </div>
    </div>
  </div>
</template>

<script>
import LayoutCol from "@/components/LayoutCol.vue";
import LightText from "@/components/lightText.vue";
export default {
  name: "HomeViewHome",
  components: { LayoutCol, LightText },
  mounted() {
    this.getUserInfo();
  },
  data() {
    return {
      // 职位列表
      articles: [],
      // 推荐职位列表
      recommendArticles: [],
      // 职位列表当前已加载前n页
      page: 1,
      userId: "",
      collectArticle: [],
    };
  },

  methods: {
    // 获取登录用户信息
    getUserInfo() {
      // GET /login/getinfo
      this.$http.get(`/login/getinfo`).then((res) => {
        const { code, msg, result } = res;
        if (code == 0) {
          this.userId = result.id;
          this.getArticlesByUserid();

          // 获取收藏职位列表
          this.$http.get(`/collect?user_id=${this.userId}`).then((res) => {
            this.collectArticle = res.result;
          });

          // 获取已申请职位列表
          this.$http.get(`/apply?user_id=${this.userId}`).then((res) => {
            this.articles = res.result;
          });
        } else {
          this.userId = "";
          let doms = document.getElementsByClassName("el-message")[0];
          if (doms == undefined) {
            this.$message({
              message: "您需要登录后，才能查看我的职位",
              type: "warning",
            });
          }
        }
      });
    },
    // 根据作者id 获取对应的职位列表---接口
    getArticlesByUserid() {
      this.$http.get(`/articles?user_id=${this.userId}`).then((res) => {
        const { code, msg, result } = res;
        if (code == 0) {
          this.articles = res.result;
        }
      });
    },
    // 点击职位列表, 跳转到职位详情页
    handleSelectArticle(id) {
      // 通过编程式导航, 跳转到 /admin/user/add 路由
      // 写法1: /admin/user/add   /开头为绝对
      // 写法2: user/add   无/为相对
      // 导航到/add组件
      // console.log(this.$route) // 保存当前的URL
      this.$router.push(`/article?id=${id}`);
    },
    // 删除已收藏职位
    deleteCollect(item) {
      this.$http.delete(`/collect/${item.id}`).then((res) => {
        const { code, msg, result } = res;
        if (code == 0) {
          this.$message.success("收藏职位删除成功！");
          this.getUserInfo();
        } else {
          this.$message.error("收藏职位删除失败！");
        }
      });
    },

    getStatusText(val) {
      var arr = ["未审批", "已通过", "未通过"];
      return arr[val];
    },
  },
};
</script>
<style lang="less" scoped>
@import "~styles/theme.styl";

.view-home {
  transition: all 0.5s;
  padding-top: 200px;
  background-color: #f3f5f8;

  .main {
    // 右区
    .right-col {
      ul {
        li {
          cursor: pointer;

          &:hover img {
            transform: scale(1.1);
          }
        }
      }

      .recommend {
        padding-right: 15px;
        height: 300px;

        h2 {
          padding-left: 5px;
          font-size: 16px;
          font-weight: bold;
          color: #424346;
        }

        .recommend-article {
          display: flex;
          margin: 12px 5px 3px 5px;

          .article-cover {
            position: relative;
            width: 96px;
            height: 60px;
            border-radius: 10px;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              transition: all 0.6s;
            }
          }

          .article-brief {
            flex: 1;
            padding-left: 10px;

            h3 {
              transition: all 0.3s ease-out 0s;
              font-size: 14px;
              font-weight: bold;
              word-break: break-all;
              transition: color 0.2s ease-out;

              &:hover {
                color: #ff638a;
              }
            }

            p {
              display: flex;
              font-size: 12px;
              justify-content: space-between;
              margin-top: 10px;
              white-space: nowrap;

              .category {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}

.collect {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 15px;

  .collect-title {
    padding-top: 5px;
    margin-left: 40px;
    font-size: 25px;
  }

  .collectItem {
    font-size: 18px;
    margin: 40px;
    cursor: pointer;
  }
}

.job-list {
  width: 800px;
  background-color: #ffffff;
  height: 150px;
  border-radius: 15px;
  margin-bottom: 15px;
  overflow: hidden;

  .top-box {
    padding: 15px;
    .top {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .top-title {
        color: #222;
        font-size: 20px;
      }
      .top-money {
        color: #fe574a;
        font-size: 20px;
        font-weight: bold;
      }
    }

    .tag {
      width: 60px;
      text-align: center;
      background-color: #f8f8f8;
      padding: 5px;
      border-radius: 5px;
      margin: 10px 0px;
      font-size: 14px;
    }
  }

  .desprition {
    font-size: 14px;
  }

  .bottom {
    display: flex;
    background: linear-gradient(90deg, #cbeafd 0, #fcfbfa 100%);

    height: 50px;

    .bottom-left {
      display: flex;
      justify-content: center;
      vertical-align: middle;
      align-items: center;
      .conpanyName {
        font-size: 15px;
        margin-left: 10px;
      }
    }
    .circle-img {
      width: 30px;
      height: 30px;
      border-radius: 15px;
      margin-left: 20px;
    }
  }
}
</style>
